import React, {Component} from 'react';

export default class ComponentInput extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            content: ''
        }
    }

    handleUsernameChange(e) {
        this.setState({
            username: e.target.value
        })
    }

    handleContentChange(e) {
        this.setState({
            content: e.target.value
        })
    }

    handleSubmitClick() {
        if (this.props.onClick) {
            const {username, content} = this.state;
            this.props.onClick({username, content});
        } else {
            this.setState({
                content: ''
            })
        }
    }

    render() {
        return (
            <div className='comment-input'>
                <div className='comment-field'>
                    <span className='comment-field-name'>用户名：</span>
                    <div className='comment-field-input'>
                        <input value={this.state.username} 
                               onChange={this.handleUsernameChange.bind(this)}
                        />
                    </div>
                </div>
                <div className='comment-field'>
                    <span className='comment-field-name'>评论内容：</span>
                    <div className='comment-field-input'>
                        <textarea value={this.state.content} 
                                  onChange={this.handleContentChange.bind(this)}  
                        />
                    </div>
                </div>
                <div className='comment-field-button'>
                    <button onClick={this.handleSubmitClick.bind(this)}>
                        发布
                    </button>
                </div>
        </div>
        )
    }
} 